<template>
  <view class="bg min100" style="padding-bottom: 118rpx">
    <view class="status_bar"></view>

    <view class="back">
      <image src="../../static/back.png" @click="handleBack"></image>
    </view>
    <view>
      <!-- 头部 -->
      <!-- <view class="image-wrap"> -->
      <image :src="info.images" class="collectImg" mode="aspectFill"></image>
      <!-- </view> -->
      <view class="topWrap white">
        <view class="plr-20 mt-30">
          <view class="size-36">
            {{ info.name }}
          </view>
          <view class="size-50 bold mb-10 gold mt-10 flex flex-between">
            <text>￥{{ info.price }}</text>
            <button class="more" @tap="showMoreFn()">
              <text>全部编号</text>
              <image src="../../static/go.png" mode=""></image>
            </button>
          </view>
          <view class="flex flex-start size-24 mb-30">
            <image
              :src="info.images"
              class="userImg flex-shrink mr-20"
              mode="aspectFill"
            ></image>
            <<!-- view class="flex-1">
							<view class="white size-28">拥有者</view>
							<view class="mt-10 white">{{info.nick_name}}</view>
						</view> -->
            <view class="white">{{ info.nick_name }}</view>
          </view>
        </view>
      </view>
      <!-- <view class="flex flex-start plr-30 ptb-30 size-24 gray-2 mb-30 radius-16" style="background:#3B3D4B;">
				<image :src="info.images" class="userImg flex-shrink mr-20" mode="aspectFill"></image>
				<view class="flex-1">
					<view class="white size-28">拥有者</view>
					<view class="mt-10 white">{{info.nick_name}}</view>
				</view>
			</view> -->
      <!-- 介绍 -->
      <view class="plr-20">
        <view class="radius-16 plr-30 ptb-30" style="background: #fff">
          <view class="flex flex-between">
            <view class="white size-28">您可能抽到以下商品中的1个</view>
          </view>
          <empty v-if="info.goods && info.goods.length == 0"></empty>
          <view class="" v-else>
            <view
              class="flex gray-2 ptb-20 flex-between"
              style="border-bottom: 1rpx solid #515151"
              v-for="(item, index) in info.goods"
              :key="index"
            >
              <view class="flex">
                <image
                  style="width: 88rpx; height: 88rpx; border-radius: 8rpx"
                  :src="item.image"
                  mode="aspectFill"
                >
                </image>
                <view class="ml-20 size-28">
                  <view class="mb-20 white">{{ item.name }}</view>
                  <view
                    ><text style="color: #7c7c7c">价值：</text
                    ><text class="gold">￥{{ item.price }}</text></view
                  >
                </view>
              </view>
              <view class="white">概率：{{ item.rate }}%</view>
            </view>
          </view>
        </view>
      </view>
      <!-- 介绍 -->
      <view class="mt-10 plr-20 ptb-30" v-if="info.content">
        <view class="mb-32 size-30 white"> 作品故事 </view>
        <view class="white infoWrap" v-html="info.content"> </view>
      </view>
    </view>
    <view class="btmWrap flex flex-between flex-middle plr-30">
      <view class="size-50 bold gold"> ￥{{ info.price }} </view>
      <view class="">
        <button
          v-if="info.status == 2"
          class="mtb-30 buyBtn"
          hover-class="none"
          :disabled="btnDisabled"
          @click="toBuy"
        >
          立即购买
        </button>
        <button v-else class="mtb-30 buyBtn" hover-class="none">
          {{ statusMap[info.status] }}
        </button>
      </view>
    </view>

    <u-popup
      v-model="showMore"
      mode="bottom"
      @close="listScrollId = ''"
      @open="moreWindowOpen"
    >
      <view class="show-price-box">
        <view class="show-price-header">
          <text>盲盒列表</text>
          <image src="../../static/close1.png" @tap="showMore = false"></image>
        </view>
        <view class="sort-type">
          <view
            @click="moreListSortCheck('time_order')"
            class="flex mr-40 sort"
            :class="{ active: query.time_order }"
          >
            <view class="mr-10 size-28">时间</view>
            <image src="../../static/sort.png" v-if="query.time_order === ''" />
            <image
              src="../../static/sort-asc.png"
              v-if="query.time_order === 1"
            />
            <image
              src="../../static/sort-desc.png"
              v-if="query.time_order === 2"
            />
          </view>
          <view
            @click="moreListSortCheck('price_order')"
            class="flex mr-40 sort"
            :class="{ active: query.price_order }"
          >
            <view class="mr-10 size-28">价格</view>
            <image
              src="../../static/sort.png"
              v-if="query.price_order === ''"
            />
            <image
              src="../../static/sort-asc.png"
              v-if="query.price_order === 1"
            />
            <image
              src="../../static/sort-desc.png"
              v-if="query.price_order === 2"
            />
          </view>
        </view>
        <scroll-view
          class="show-price-body"
          @scrolltolower="moreList()"
          :scroll-into-view="listScrollId"
          scroll-y="true"
        >
          <view
            class="show-price-item"
            v-for="(item, index) in list"
            :key="index"
            :id="`item_${item.users_box_id}`"
            @click="selectItem(item)"
          >
            <view class="left">
              <view>
                <image class="img" :src="item.image"></image>
              </view>
            </view>
            <view class="right">
              <view class="title">
                {{ item.nick_name }}
              </view>
              <view class="item-id">
                链上标识：<text>{{ item.users_box_id }}</text>
              </view>
              <view class="item-price gold">
                <text>￥{{ item.price }}</text>
                <view class="item-price-right">
                  <text>盲盒</text>
                  <text v-if="item.status != 2" class="collect-pay-status">
                    {{ statusMap[item.status] }}
                  </text>
                </view>
              </view>
            </view>
            <image
              class="right-icon"
              src="../../static/back-icon.png"
              mode=""
            ></image>
          </view>
        </scroll-view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import empty from "../../components/empty.vue";
export default {
  components: {
    empty,
  },
  data() {
    return {
      btnDisabled: false,
      users_box_id: "",
      info: {
        goods: [],
      },

      statusMap: {
        1: "持有中",
        2: "挂售中",
        3: "交易中",
        4: "已出售",
        5: "已转赠",
        6: "已打开",
      },
      showMore: false,
      query: {
        // categoryId: 0,
        boxId: 0,
        search: "",
        time_order: "",
        price_order: 1,
        page: 1,
        pagesize: 20,
      },
      // 用户商品列表
      list: [],
      listLoading: false,
      listNoMore: false,
      // 全部编号列表 - 位置id
      listScrollId: "",
    };
  },
  onLoad(options) {
    this.users_box_id = parseInt(options.users_box_id || 0);
    this.query.boxId = parseInt(options.boxId || 0);
    if (this.query.boxId > 0) {
      this.moreList();
    }
  },
  methods: {
    // 全部编号列表打开后，设置列表滚动的位置
    moreWindowOpen() {
      setTimeout(() => {
        this.listScrollId = "item_" + this.users_box_id;
      }, 30);
    },
    // 选择编号
    selectItem(item) {
      if (item.status != 2) {
        return uni.showToast({
          icon: "none",
          title: `该盲盒${this.statusMap[item.status]}`,
        });
      }
      // 更新页面地址
      uni.redirectTo({
        url: `/pages/market/marketBox?boxId=${this.query.boxId}&users_box_id=${item.users_box_id}`,
      });
      // 本页刷新，不更新地址
      // this.users_box_id = item.users_box_id;
      // this.getDetail();
      // this.showMore = false;
    },
    // 打开"全部编号"弹窗
    showMoreFn() {
      // if (this.list.length === 0) {
      //  this.moreList();
      // }
      this.query.page = 1;
      this.listNoMore = false;
      this.showMore = true;
      this.moreList();
    },
    moreListSortCheck(key) {
      if (this.listLoading) return;
      // '' 无排序 1正序 2倒叙
      let sortType = this.query[key];
      if (sortType) {
        sortType = sortType === 1 ? 2 : 1;
      } else {
        sortType = 1;
      }
      this.query.page = 1;
      this.query.price_order = "";
      this.query.time_order = "";
      this.query[key] = sortType;
      this.listNoMore = false;
      this.moreList();
    },
    // 全部编号列表请求
    moreList() {
      if (this.listNoMore || this.listLoading) return;
      this.listLoading = true;
      uni.showLoading({
        mask: true,
      });
      this.$http("api/trade/tradeBoxList", this.query)
        .then((res) => {
          let data = res.data;
          this.list = this.query.page === 1 ? data : [...this.list, ...data];
          if (this.query.page === 1 && !this.info.users_box_id) {
            if (this.users_box_id > 0) {
              this.getDetail();
            } else if (data.length > 0) {
              this.users_box_id = data[0].users_box_id;
              this.getDetail();
            } else {
              uni.showModal({
                title: "提示",
                content: "该盲盒暂无寄售",
                confirmText: "返回",
                showCancel: false,
                success: () => {
                  uni.navigateBack({
                    delta: 1,
                  });
                },
              });
            }
          }
          if (data.length < this.query.pagesize) {
            this.listNoMore = true;
          } else {
            this.query.page += 1;
          }
        })
        .catch(() => (this.listNoMore = true))
        .finally(() => {
          this.listLoading = false;
          uni.hideLoading();
        });
    },

    getDetail() {
      this.$http("api/trade/boxDetail", {
        users_box_id: this.users_box_id,
      }).then((res) => {
        if (res.toString() !== "[]") {
          this.info = res;
        }
      });
    },

    handleBack() {
      if (getCurrentPages().length === 1) {
        uni.switchTab({
          url: "/pages/home/index",
        });
      } else {
        uni.navigateBack();
      }
    },
    // 购买
    toBuy() {
      this.btnDisabled = true;
      this.$http("api/orders/tradeBox", {
        users_box_id: this.users_box_id,
      }).then((res) => {
        this.btnDisabled = false;
        uni.navigateTo({
          url: "../pay/boxPay?order_id=" + res.order_id,
        });
      });
    },
    // 复制
    copyAddress(val) {
      // #ifdef APP-PLUS
      uni.setClipboardData({
        data: this.val,
        success: function () {
          uni.hideToast();
          uni.getClipboardData({
            success: function (res) {
              uni.showToast({
                title: "复制成功",
                icon: "none",
              });
            },
          });
        },
      });
      // #endif
      // #ifdef H5
      let that = this;
      this.$copyText(val).then(
        function (e) {
          uni.showToast({
            title: "复制成功!",
            icon: "none",
          });
        },
        function (e) {
          uni.showToast({
            title: "复制失败!",
            icon: "none",
          });
        }
      );
      // #endif
    },
  },
};
</script>

<style lang="less" scoped>
page {
  background: #f5f5f5;
}
.white {
  color: #3c3c3c;
}
.gold {
  color: #9c8b66;
}
.back {
  position: relative;
  height: 0;
  image {
    position: absolute;
    width: 20rpx;
    height: 36rpx;
    top: 30rpx;
    left: 30rpx;
    z-index: 99;
  }
}
.userImg {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
}

.btmWrap {
  height: 118rpx;
  position: fixed;
  z-index: 10;
  width: 100%;
  bottom: 0;
  background: #fff;
}

.buyBtn {
  width: 240rpx;
  height: 78rpx;
  margin: 0;
  padding: 0;
  color: #ffffff;
  font-size: 30rpx;
  text-align: center;
  line-height: 78rpx;
  background: linear-gradient(90deg, #eea634, #de2d32);
  border-radius: 39rpx;
}

.tipsLeft {
  background: #efaa1c;
  color: #2f2f2e;
}

.collectImg {
  width: 100%;
  height: 450rpx;
}

.infoWrap {
  /deep/ img {
    width: 100% !important;
    height: auto;
  }
}

.more {
  font-size: 28rpx;
  color: #3c3c3c;
  display: flex;
  align-items: center;
  margin: 0;
  border: none;
  background: none;
  filter: brightness(0.1);
  &::after {
    display: none;
  }
  image {
    width: 24rpx;
    height: 24rpx;
    margin-left: 5rpx;
  }
}

.show-price-box{
  background-color: #f5f5f5;
  z-index: 100;
  overflow: hidden;
  .show-price-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20rpx;
    height: 100rpx;
    background-color: #fff;
    text{
      font-size: 40rpx;
      font-weight: bold;
      color: #3c3c3c;
    }
    image{
      width: 30rpx;
      height: 30rpx;
    }
  }
  .sort-type {
    display: flex;
    background-color: #fff;
    padding: 10rpx 20rpx;
    button {
      border: none;
      border-radius: 0;
      line-height: 50rpx;
      height: 50rpx;
      padding: 0 30rpx;
      font-size: 28rpx;
      background: none;
      color: #666666;
      font-weight: bold;
    }
    button.active {
      background: #ffffff;
      color: #000000;
    }
    button::after {
      display: none;
    }
  }

  .sort {
    display: flex;
    // align-items: center;
    margin-left: 10rpx;
    justify-content: flex-start;
    image {
      width: 16rpx;
      height: 24rpx;
      margin-left: 10rpx;
    }
    & + .sort {
      margin-left: 40rpx;
    }
  }

  .show-price-body{
    width: 100%;
    height: calc(100vh - 400rpx);
    box-sizing: border-box;
    padding: 0 40rpx;
    background-color: #f5f5f5;
    .show-price-item {
      display: flex;
      align-items: center;
      padding: 20rpx 16rpx;
      margin: 20rpx 0;
      background-color: #fff;
      border-radius: 10rpx;

      .img {
        width: 180rpx;
        height: 180rpx;
        border-radius: 8rpx 0 0 8rpx;
      }
      .title{
        font-size: 30rpx;
        font-weight: bold;
        color: #1a1a1a;
        display: flex;
        align-items: center;
      }
      .item-id{
        font-size: 24rpx;
        text{
          font-weight: bold;
        }
      }

      .right{
        flex: 1;
        height: 180rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 20rpx;
        position: relative;

        .item-price{
          font-size: 32rpx;
          display: flex;
          justify-content: space-between;
          &>text:first-child{
            font-size: 34rpx;
            font-weight: bold;
          }
          .item-price-right{
            text{
              padding: 5rpx 10rpx;
              font-size: 24rpx;
              border-radius: 5rpx;
              margin-left: 10rpx;
              background-color: rgba(255, 16, 241, 0.1);
              color: rgba(209, 13, 200, 1.0);
              font-weight: bold;
            }
            .collect-pay-status{
              background-color: rgba(255, 16, 241, 0.1);
              color: rgba(209, 13, 200, 1.0);
            }
          }
        }
      }
      .item-price {
        font-size: 34rpx;
      }
      .right-icon {
        margin-left: auto;
        width: 30rpx;
        height: 30rpx;
      }
    }
  }
}
</style>